<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <!-- 绑定js表达式，极度不推荐 -->
        <!-- <div>
            <h1>{{ count }}</h1>
            <button @click='count+=1'>ADD</button>
            <button @click='count-=1'>MINUS</button>
        </div> -->
        <!-- 绑定处理函数 -->
        <!-- <div>
            <h1>{{ count }}</h1>
            <button @click='addCount'>ADD</button>
            <button @click='minusCount'>MINUS</button>
        </div> -->
        <!-- 内联绑定处理函数 -->
        <!-- 调用：这里不会执行methods里对应的方法，调用的目的是为了传入实参 -->
        <!-- <div>
            <h1>{{ count }}</h1>
            <button @click='addCount(2)'>ADD</button>
            <button @click='minusCount(2)'>MINUS</button>
        </div> -->
        <!-- 内联绑定处理函数 -->
        <!-- $event是vue封装的事件对象，变量名不可变，是vue中的特殊变量 -->
        <!-- <div>
            <h1>{{ count }}</h1>
            <button @click='addCount(2,$event)'>ADD</button>
            <button @click='minusCount(2,$event)'>MINUS</button>
        </div> -->
        <!-- 多事件处理函数绑定 -->
        <div>
            <h1>{{ count }}</h1>
            <button @click="addCount(2,$event),setLog('add',1)">ADD</button>
            <button @click="minusCount(2,$event),setLog('minus',1)">MINUS</button>
        </div>
    </div>
    <script type="text/javascript">
        /**
         * 事件处理->绑定事件处理函数
         * 
         * 事件是不需要绑定的
         * 浏览器自带了很多事件
         * 每个事件可以绑定处理器，处理器就是处理函数
         * 
         * 事件通过用户行为触发，执行事件对应的处理函数
         * 
         * 事件的触发会执行其绑定的处理函数
         * 
         * 绑定事件处理函数，不是执行事件处理函数
         * 执行事件处理函数的时机，当前绑定事件处理的事件被触发的时候
         **/
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    count: 1,
                    log: []
                }
            },
            computed: {

            },
            mounted() {

            },
            methods: {
                // minusCount() {
                //     this.count -= 1;
                //     this.setLog('minus', 1);
                //     console.log(this.log)
                // },
                // addCount() {
                //     this.count += 1;
                //     this.setLog('add', 1);
                //     console.log(this.log)
                // },
                minusCount(num, e) {
                    console.log(e);
                    this.count -= num;
                    // this.setLog('minus', num);
                    // console.log(this.log)
                },
                addCount(num, e) {
                    console.log(e);
                    this.count += num;
                    // this.setLog('add', num);
                    // console.log(this.log)
                },
                setLog(eventName, num) {
                    this.log.push({
                        eventName,
                        Number: num,
                        dateTime: new Date(),
                    })
                }
            }
        })
    </script>
</body>

</html>